<template>
  <div>
    <!-- 公共头部组件-->
    <Header></Header>
    <el-timeline>
      <el-timeline-item
        v-for="blog in blogs"
        :key="blog.id"
        :timestamp="blog.created"
        placement="top"
      >
        <el-card>
          <h4>
            <router-link :to="{name:'BlogDetail',params:{blogId:blog.id}}">{{blog.title}}</router-link>
          </h4>
          <p>{{blog.description}} 提交于 {{blog.created}}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <!-- 分页 -->
    <el-pagination
      class="c_pagination"
      background
      layout="prev, pager, next"
      :current-page="currPage"
      :page-size="pageSize"
      :total="total"
      @current-change="page"
    ></el-pagination>
  </div>
</template>
<script>
// 引入 其他组件
import Header from "../components/Header";

export default {
  name: "Blogs.vue",
  components: { Header },
  data() {
    return {
      blogs: [],
      currPage: 1,
      total: 0,
      pageSize: 5,
    };
  },
  created() {
    // 页面加载完成调用 ，默认显示第1页
    this.page(1);
  },
  computed: {},
  methods: {
    page(currPage) {
      const _this = this;
      _this.$axios.get("/blogs?currentPage=" + currPage).then((res) => {
        console.log(res);
        // 列表
        _this.blogs = res.data.data.records;
        // 总数
        _this.total = res.data.data.total;
        // 当前页码
        _this.currPage = res.data.data.current;
        // 每页显示条数
        _this.pageSize = res.data.data.size;
      });
    },
  },
};
</script>
<style  scoped>
.c_pagination {
  margin: 0 auto;
  text-align: center;
}
</style>
